<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="统计区域" prop="areaName">
          <el-input
            v-model="queryForm.areaName"
            placeholder="用户"
            style="width: 100px;"
            :disabled="true"
          />
        </el-form-item>

<!--        <el-form-item label="客户编号" prop="areaName">-->
<!--          <el-input-->
<!--            v-model="queryForm.customerSerialnumber"-->
<!--            placeholder="用户"-->
<!--            style="width: 100px;"-->
<!--          />-->
<!--        </el-form-item>-->

        <el-form-item label="客户名称" prop="areaName">
          <el-input
            v-model="queryForm.customerName"
            placeholder="用户"
            style="width: 100px;"
          />
        </el-form-item>

        <el-form-item label="表计地址" prop="areaName">
          <el-input
            v-model="queryForm.serialnumber"
            placeholder="用户"
            style="width: 100px;"
          />
        </el-form-item>

<!--        <el-form-item label prop="searchVal">-->
<!--          <el-input v-model="queryForm.searchVal" placeholder="请输入" style="width: 100px;" />-->
<!--        </el-form-item>-->

        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="paginationCurrentChange"
          @dialog-open="handleDialogOpen"
          @dialog-cancel="handleDialogCancel"
          :form-options="formOptions"
          add-title="新增"
          edit-title="修改"
        >
        </d2-crud>
      </template>
    </split-pane>
    <el-dialog :visible.sync="removeWatchFlag" v-if="removeWatchFlag" title="拆表">
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        拆表时间：
        <el-input
          placeholder="请输入内容"
          :disabled="true"
          style="width: 200px"
          v-model="calledData.time">
        </el-input>
      </div>
<!--      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">-->
<!--        客户编号：-->
<!--        <el-input-->
<!--          placeholder="请输入内容"-->
<!--          :disabled="true"-->
<!--          style="width: 200px"-->
<!--          v-model="calledData.customerSerialnumber">-->
<!--        </el-input>-->
<!--      </div>-->
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        客户名称：
        <el-input
          placeholder="请输入内容"
          :disabled="true"
          style="width: 200px"
          v-model="calledData.customerName">
        </el-input>
      </div>
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        表计地址：
        <el-input
          placeholder="请输入内容"
          :disabled="true"
          style="width: 200px"
          v-model="calledData.serialNumber">
        </el-input>
      </div>
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        旧表读数：
        <el-input
          placeholder="请输入内容"
          style="width: 200px"
          v-model="calledData.readingnumBefore">
        </el-input>
      </div>
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
         I M E I ：
        <el-input
          placeholder="请输入内容"
          :disabled="true"
          style="width: 200px"
          v-model="calledData.nbonetNetImei">
        </el-input>
      </div>
      <div class="demo-input-suffix" style="width: 100%;margin-bottom: 20px;">
        拆表备注 ：
        <el-input
          type="textarea"
          style="width: 92%"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="calledData.resultInfo">
        </el-input>
      </div>
      <div class="btn-box" style="width: 92%; text-align: right; padding-right: 20px">
        <el-button @click="removeWatchSure" type="primary">确定拆表</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="displaceWatchFlag" v-if="displaceWatchFlag" title="换表">
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        拆表时间：
        <el-input
          placeholder="请输入内容"
          :disabled="true"
          style="width: 200px"
          v-model="calledData.time">
        </el-input>
      </div>
<!--      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">-->
<!--        档案选择：-->
<!--        <el-select v-model="archive" placeholder="请选择" :disabled="true" style="width: 200px;">-->
<!--          <el-option-->
<!--            v-for="(item, index) in archiveList"-->
<!--            :key="index"-->
<!--            :label="item.label"-->
<!--            :value="item.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </div>-->
<!--      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">-->
<!--        客户编号：-->
<!--        <el-input-->
<!--          placeholder="请输入内容"-->
<!--          :disabled="true"-->
<!--          style="width: 200px"-->
<!--          v-model="calledData.customerSerialnumber">-->
<!--        </el-input>-->
<!--      </div>-->
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        客户名称：
        <el-input
          placeholder="请输入内容"
          :disabled="true"
          style="width: 200px"
          v-model="calledData.customerName">
        </el-input>
      </div>
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        旧表读数：
        <el-input
          placeholder="请输入内容"
          style="width: 200px"
          v-model="calledData.readingnumBefore">
        </el-input>
      </div>
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        新表读数：
        <el-input
          placeholder="请输入内容"
          style="width: 200px"
          v-model="calledData.readingnumAfter">
        </el-input>
      </div>
<!--      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">-->
<!--        表计地址：-->
<!--        <el-input-->
<!--          placeholder="请输入内容"-->
<!--          :disabled="true"-->
<!--          style="width: 200px"-->
<!--          v-model="calledData.serialnumber">-->
<!--        </el-input>-->
<!--      </div>-->
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        I M E I ：
        <el-input
          placeholder="请输入内容"
          :disabled="true"
          style="width: 200px"
          v-model="calledData.nbonetNetImei">
        </el-input>
      </div>
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        设备信息：
        <el-select @change="serialnumberChange" v-model="newSerialnumber" placeholder="请选择" style="width: 200px;">
          <el-option
            v-for="(item, index) in serialnumberList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="demo-input-suffix" style="width: 100%;margin-bottom: 20px;">
        拆表备注 ：
        <el-input
          type="textarea"
          style="width: 92%"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="calledData.resultInfo">
        </el-input>
      </div>
      <div class="btn-box" style="width: 92%; text-align: right; padding-right: 20px">
        <el-button @click="changeWatchSure" type="primary">确定换表</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
import MyAreaTree from '@/components/my-area-tree'

export default {
  name: 'household',
  components: { MyAreaTree },

  data () {
    return {
      removeWatchFlag: false,
      displaceWatchFlag: false,
      archiveList: null,
      archive: null,
      newSerialnumber: null,
      newNbonetNetImei: null,
      calledData: null,
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 0
      },
      queryForm: {
        areaId: '1',
        areaName: '中国',
        customerName: '', // 客户名称
        customerSerialnumber: '', // 客户编号
        serialnumber: '', // 表计地址
        searchVal: ''
      },
      columns: [
        {
          title: '序号',
          key: 'serialNum',
          width: 50
        },
        {
          title: '操作',
          key: 'state',
          sortable: false,
          component: {
            render: (h, row, node, index) => {
              return (
                <div>
                  <span
                    onClick={() => {
                      this.clickState(row, 'remove')
                    }}
                    style="cursor:pointer;color:#409EFF;margin-right:4px;"
                  >
                 拆表
                  </span>
                  <span
                    onClick={() => {
                      this.clickState(row)
                    }}
                    style="cursor:pointer;color:#409EFF"
                  >
                 换表
                  </span>
                </div>
              )
            }
          }
        },
        {
          title: '客户名称',
          key: 'customerName',
          sortable: true
        },
        {
          title: '户号名称',
          key: 'householdName',
          sortable: true
        },
        {
          title: '表计地址',
          key: 'serialNumber',
          sortable: true
        }
      ],
      data: [],
      treeData: [],
      values: [],
      serialnumberList: [],
      treeParams: {
        'default-expand-all': true,
        data: [],
        props: {
          children: 'children',
          label: 'name',
          value: 'id'
        }
      },
      formOptions: {
        labelWidth: '80px',
        labelPosition: 'left',
        saveLoading: false
      }
    }
  },
  mounted () {
    this.getEquipConcentVOList()
    this.getArchiveList()
    this.fetchData()
  },
  methods: {
    serialnumberChange (item) {
      const findI = this.serialnumberList.find(s => s.serialNumber === item)
      this.newNbonetNetImei = findI.imei
    },
    // 获取设备信息
    getEquipConcentVOList () {
      this.$api
        .admin_concent_getEquipConcentVOList({ serialnumber: '' })
        .then(res => {
          this.serialnumberList = res.map(r => {
            return {
              ...r,
              value: r.serialNumber,
              id: r.serialNumber
            }
          })
        })
        .finally(() => {
          // this.formOptions.saveLoading = false
        })
    },
    // 获取档案列表
    getArchiveList () {
      const params = {
        areaOrg: this.queryForm.areaId,
        customerName: this.queryForm.customerName
      }
      this.$api
        .admin_areaArchives_getList({
          ...params
        })
        .then(res => {
          this.archiveList = res.map(r => {
            return {
              ...r,
              value: r.id,
              label: r.measureName
            }
          })
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    removeWatchSure () {
      const params = JSON.parse(JSON.stringify(this.calledData))
      params.dateTime = params.time
      params.oldSerialnumber = params.serialNumber
      params.oldNbonetNetImei = params.imei
      this.$api
        .admin_logArchivesChange_remove({
          ...params
        })
        .then(res => {
          res ? this.$message.success('拆表成功') : this.$message.success('拆表失败')
          this.removeWatchFlag = false
          this.fetchData();
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    changeWatchSure () {
      // if (!this.archive) {
      //   this.$message.error('请选择档案')
      //   return
      // }
      // const obj = this.archiveList.find(a => a.id === this.archive)
      console.log(this.calledData)
      const params = JSON.parse(JSON.stringify(this.calledData))
      params.dateTime = params.time
      params.oldNbonetNetImei = params.imei
      params.newNbonetNetImei = this.newNbonetNetImei
      params.oldSerialnumber = params.serialNumber
      this.$api
        .admin_logArchivesChange_change({
          ...params,
          newSerialnumber: this.newSerialnumber
          // newSysconfigMeterModel: obj.id
        })
        .then(res => {
          res ? this.$message.success('换表成功') : this.$message.success('换表失败')
          this.displaceWatchFlag = false;
          this.fetchData();
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    clickState (row, type) {
      this.getInfo(row, type)
    },
    handleDialogOpen ({ mode, row, index }) {
      console.log(mode, row)
      if (mode === 'edit') {
        this.$api.admin_household_get({ id: row.id }).then(res => {
          this.$refs.d2Crud.setFormData(res)
        })
      }
    },
    // 关闭弹框
    handleDialogCancel (done) {
      done()
    },
    // 分页操作
    paginationCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.fetchData()
    },
    onAreaChange (data, node) {
      this.queryForm.areaId = data.id
      this.queryForm.areaName = data.name
      this.fetchData()
    },
    getInfo (row, type) {
      console.log(row)
      const time = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()} ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
      this.calledData = {
        readingnumAfter: '',
        readingnumBefore: '',
        ...row,
        time,
        resultInfo: ''
      }
      console.log(this.calledData)
      type === 'remove' ? this.removeWatchFlag = true : this.displaceWatchFlag = true
      // this.$api
      //   .admin_logArchivesChange_get({ id: row.id })
      //   .then(res => {
      //     const time = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()} ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
      //     this.calledData = {
      //       ...res,
      //       time,
      //       resultInfo: ''
      //     }
      //     type === 'remove' ? this.removeWatchFlag = true : this.displaceWatchFlag = true
      //   })
      //   .catch(err => {
      //     console.log('err', err)
      //   })
      //   .finally(() => {
      //     this.loading = false
      //   })
    },
    fetchData () {
      this.loading = true
      this.$api
        .admin_logArchivesChange_getPageList({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          areaOrg: this.queryForm.areaId,
          customerName:this.queryForm.customerName,
          serialnumber:this.queryForm.serialnumber,
        })
        .then(res => {
          this.data = res.data
          this.pagination.total = res.total
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleFormSubmit () {
      this.pagination.currentPage = 1
      this.fetchData()
    }
  }
}
</script>
